<template>
  <div class="personalData">
    <!-- 个人资料 -->
    <el-form ref="form" :model="sizeForm" label-width="100px" size="mini">
      <!-- 网站logo -->
      <el-form-item label="软件logo">
        <!-- action 这个是图片上传发送的地址
          show-file-list 这个是设置是否上传多张图片
          on-success 这个是上传图片成功的回调函数
        before-upload 这个是上传图片之前的回调函数-->
        <!-- action="http://192.168.1.220:8003/UserInfo/PTUploadLogoFilesAjax" -->
        <el-upload
          action="/UserInfo/PTUploadLogoFilesAjax"
          class="avatar-uploader"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            style="height: 70px;width: 260px;background-color: #c1c1c1"
            :src="imageUrl"
            class="avatar"
            :onerror="errorGoodsImg"
          />
        </el-upload>
        <span style="color: #ccc">图片建议为260x70，大小不超过300kb的jpg/png/jpeg图像</span>
      </el-form-item>
      <!-- 代理商名称 -->
      <el-form-item label="代理商名称">
        <el-input size="small" v-model="sizeForm.agencyName" disabled></el-input>
      </el-form-item>
      <!-- 账号 -->
      <el-form-item label="账号">
        <el-input size="small" v-model="sizeForm.account" disabled></el-input>
      </el-form-item>
      <!-- 联系电话 -->
      <el-form-item label="联系电话">
        <el-input size="small" v-model="sizeForm.phone" disabled></el-input>
      </el-form-item>
      <!-- 代币剩余 -->
      <el-form-item label="代币剩余">
        <el-input size="small" v-model="sizeForm.balance" disabled></el-input>
      </el-form-item>
      <!-- 短信余量 -->
      <el-form-item label="短信余量">
        <!-- type="flex" 应用flex布局
        el-col :span="" 应用栅格布局-->
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <el-input size="small" v-model="sizeForm.allowance" disabled class="changeInput1"></el-input>
          </el-col>
          <el-col :span="10">
            <el-button
              type="primary"
              size="mini"
              @click="handleToMsgRecharge"
              style="z-index: 50"
            >短信充值</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 软件域名 -->
      <el-form-item label="软件域名">
        <el-row type="flex" justify="space-between" class="changeInput2">
          <el-input size="small" v-model="sizeForm.domain1" disabled class="changeInput"></el-input>
          <el-input size="small" value=".mispos.cc" disabled class="changeInput"></el-input>
          <el-button type="primary" style="padding: 8px 20px;margin: 0;height: 30px" disabled>设置</el-button>
        </el-row>
      </el-form-item>
      <!-- 等级 -->
      <el-form-item label="等级">
        <el-input size="small" v-model="sizeForm.grade" disabled></el-input>
      </el-form-item>
      <!-- 所在地址 -->
      <el-form-item class="adressSelect" label="所在地址" size="mini">
        <el-cascader
          expand-trigger="hover"
          :options="options"
          v-model="selectedOptions"
          placeholder="请选择地址"
          size="small"
          disabled
        ></el-cascader>
        <el-input size="small" v-model="sizeForm.location" class="detailAdress" disabled></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data";
export default {
  data() {
    return {
      // 表单数据
      sizeForm: {
        agencyName: "",
        account: "",
        phone: "",
        // 封面图片的数组，通常只有一个
        imgList: [],
        balance: "",
        allowance: "",
        domain1: "",
        grade: "",
        location: "" // 店铺地址
      },
      // 这个是保存上传图片的数据
      imageUrl: "",
      errorGoodsImg: "",
      // 这两个是图片相册中的参数，组件自带的
      dialogImageUrl: "",
      dialogVisible: false,
      // 图片数据
      imgData: {},
      // 地址级联数据
      options: regionData,
      selectedOptions: [],
      // 身份令牌
      myToken: ""
    };
  },
  methods: {
    // 这个是上传图片成功的回调函数
    handleAvatarSuccess(res, file, fileList) {
      var data = new FormData();
      data.append(file.raw.name, file.raw);
      this.imgData = data;
      // 这条命令是用于预览图片的，URL.createObjectURL这个是出于window下H5的新街口，file.raw是路径
      this.imageUrl = URL.createObjectURL(file.raw);
      // 将图片保存在本地数据,因为数据通常只有一个，所以可以直接赋值给数组的第一项
      this.sizeForm.imgList[0] = res;
      this.$api.uploadPictures(this.imgData, this.myToken).then(res => {
        const { errmsg, values } = res;
        if (errmsg != "上传文件成功！") {
          this.$message.error(errmsg + "——请重新上传");
        } else {
          this.imageUrl = res.values;
        }
      });
    },
    // 这个是上传图片之前的回调函数
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传logo大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 跳转到短信充值页面
    handleToMsgRecharge() {
      this.$router.push("msgRecharge");
    }
  },
  mounted() {
    // 获取令牌
    this.myToken = sessionStorage.getItem("myToken");
    // 个人资料
    this.$api.getAgentInformation(this.myToken).then(res => {
      const { values, succeed } = res;
      if (succeed) {
        this.options = regionData;
        // logo
        this.imageUrl = values.sv_dc_websitelogo;
        this.errorGoodsImg = "this.src='/static/test.png';this.onerror = null";
        // 信息
        this.sizeForm.agencyName = values.sv_d_companyname;
        this.sizeForm.account = values.sv_d_mobile;
        this.sizeForm.phone = values.sv_d_phone;
        this.sizeForm.balance = values.sv_dw_balance;
        this.sizeForm.allowance = values.sv_sms_balance;
        this.sizeForm.grade = values.sv_dl_name;
        this.sizeForm.location = values.sv_d_address;
        this.selectedOptions.push(
          values.sv_d_province + "0000",
          values.sv_d_city + "00",
          values.sv_d_district + ""
        );
      }
    });
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.personalData {
  background-color: #fff;
  padding: 20px;
}
// 地址级联的样式
.adressOpation {
  width: 95px;
}
.adressOpation @{deep} .el-input__inner {
  width: 95px;
}
.detailAdress {
  margin-top: 10px;
}
// 更改组件的样式
.personalData @{deep} .el-upload-list--picture {
  width: 400px;
}
.personalData @{deep} .el-form {
  background-color: #fff;
  padding: 30px 30%;
  box-sizing: border-box;
}
.personalData @{deep} .el-input--small {
  width: 400px;
}
.personalData @{deep} .el-input__inner {
  width: 400px;
  margin-bottom: 10px;
}
.personalData .changeInput1.el-input--small {
  width: 280px;
}
// 短信余量的输入框
.changeInput1 @{deep} .el-input__inner {
  width: 280px;
}
// 软件域名的表单宽度
.personalData .changeInput2 {
  width: 150px;
}
// 软件域名的输入框
.changeInput @{deep} .el-input__inner {
  width: 150px;
  margin-right: 17px;
}
</style>